<template>
  <FrontSideTable
    ref="recordTable"
    dataUrl="/bridge/bridgeRecord/getListByBridgeId"
    :dataParam="{bridgeId:currentBridge.id}"
    addUrl="/bridge/bridgeRecord/add"
    editUrl="/bridge/bridgeRecord/edit"
    deleteUrl="/bridge/bridgeRecord/delete"
    :tableTitle="'桥梁修建工程记录管理 / '+currentBridge.roadNo+' '+this.currentBridge.name"
    :columns="columns"
    searchHint="输入关键字搜索，多个关键字用空格隔开"
    :searchProps="searchProps"
    :form="form"
    formDialogSize="small"
    :loadingForm="loadingForm"
    :rules="rules"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onBack="handleBack"
    canBack>
    <!--表单-->
    <template slot="form">
      <!--第一行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="开工日期" prop="commencementDate">
            <el-date-picker v-model="form.commencementDate" style="width: 100%;" align="right" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="竣工日期" prop="completionDate">
            <el-date-picker v-model="form.completionDate" style="width: 100%;" align="right" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第二行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="修建类别" prop="buildTypeId">
            <el-select v-model="form.buildTypeId" style="width: 100%;" placeholder="请选择修建类别" filterable>
              <el-option v-for="item of buildTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修建原因">
            <el-input v-model="form.buildReason" placeholder="请输入修建原因"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第三行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="工程范围">
            <el-input v-model="form.projectRange" placeholder="请输入工程范围"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工程费用">
            <el-input v-model="form.projectCost" placeholder="请输入工程费用"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第四行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="经费来源">
            <el-input v-model="form.financialSupport" placeholder="请输入经费来源"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="质量评定">
            <el-input v-model="form.qualityEvaluation" placeholder="请输入质量评定"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第五行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="建设单位">
            <el-input v-model="form.buildUnit" placeholder="请输入建设单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设计单位">
            <el-input v-model="form.designUnit" placeholder="请输入设计单位"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--第六行-->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="施工单位">
            <el-input v-model="form.constructionUnit" placeholder="请输入施工单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监理单位">
            <el-input v-model="form.supervisionUnit" placeholder="请输入监理单位"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue"
  import {doGet} from "../../assets/js/utils/RequestUtils";

  const BUILD_TYPE_DATA_URL = "/bridge/bridgeRecord/getBuildTypeList";

  export default {
    name:"RecordManagement",
    props:{
      currentBridge:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        dataList:[],
        columns:[
          {prop:"commencementDateStr", label:"开工日期"},
          {prop:"completionDateStr", label:"竣工日期"},
          {prop:"buildTypeName", label:"修建类别"},
          {prop:"buildReason", label:"修建原因"},
          {prop:"projectRange", label:"修建范围"},
          {prop:"projectCost", label:"工程费用(万元)"},
          {prop:"financialSupport", label:"经费来源"},
          {prop:"qualityEvaluation", label:"质量评定"}
        ],
        searchProps:["buildTypeName", "buildReason", "projectRange", "financialSupport", "qualityEvaluation"],
        form:{
          buildTypeId:"",
          commencementDate:new Date(),
          completionDate:new Date()
        },
        rules:{
          buildTypeId:[
            {required:true, message:"请选择修建类别", trigger:"blur"}
          ]
        },
        buildTypeList:[],
        loadingForm:false
      }
    },
    methods:{
      handleAdd() {
        this.form.bridgeId = this.currentBridge.id;
      },
      handleEdit(data) {
        this.form = {...data};
      },
      handleBack() {
        this.$emit("onRecordBack");
      },
      fetchBuildTypeList() {
        doGet(BUILD_TYPE_DATA_URL,{component:this}).then(response=>this.buildTypeList = response);
      }
    },
    created() {
      this.fetchBuildTypeList();
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// RecordManagement.vue?450c5ab1
